import React, { Component } from 'react';
import {Link} from 'react-router-dom';
import { CSSTransition } from 'react-transition-group';
import { connect } from 'react-redux';
import {actionCreators} from './store';
import {actionCreators as loginActionCreators} from '../../pages/login/store';

import { HeaderWrapper, Logo, Nav, NavItem, NavSearch, Addition, Button, SearchWrapper, SearchInfo, SearchTitle, SearchInfoSwitch, SearchInfoList, SearchInfoItem } from './style';

class Header extends Component {
    constructor(props) {
        super(props);
        this.spinIcon = React.createRef();
    }

    getListArea() {
        const { focused, mouseIn, list, page, totalPage, handleMouseEnter, handleMouseLeave, handleChange } = this.props;
        const newList = list.toJS(); // 将immutable对象转为Js对象
        const pageList = [];

        if (newList.length) {
            for (let i = (page - 1) * 10; i < page * 10; i++) {
                if (!newList[i]) continue;
                pageList.push(
                    <SearchInfoItem key={newList[i]}>{newList[i]}</SearchInfoItem>
                )
            }
        }


        if (focused || mouseIn) {
            return (
                <SearchInfo
                    onMouseEnter={handleMouseEnter}
                    onMouseLeave={handleMouseLeave}
                >
                    <SearchTitle>
                        热门搜索
                                </SearchTitle>
                    <SearchInfoSwitch
                        onClick={() => handleChange(page, totalPage, this.spinIcon)}
                    >
                        <i ref={this.spinIcon} className="iconfont spin">&#xe60e;</i>
                        换一批

                                </SearchInfoSwitch>
                    <SearchInfoList>
                        {pageList}
                    </SearchInfoList>
                </SearchInfo>
            )
        } else {
            return null;
        }
    }

    render() {
        const { focused, list, login, handleInputFocus, handleInputBlur, logout } = this.props;
        return (
            <HeaderWrapper>
                <Link to='/'>
                <Logo />
                </Link>
                <Nav>
                    <NavItem className={'left'}>首页</NavItem>
                    <NavItem className={'left'}>下载app</NavItem>
                    {
                        login ? 
                        <NavItem className={'right'} onClick={logout} style={{'cursor':'pointer'}}>退出</NavItem> : 
                        <Link to='/login'><NavItem className={'right'}>登录</NavItem></Link>
                    }
                    
                    <NavItem className={'right'}>
                        <i className="iconfont">&#xe636;</i>
                    </NavItem>
                    <SearchWrapper>
                        <CSSTransition
                            in={focused} // 开始的条件
                            timeout={500} // 过度时间
                            classNames={'slide'}
                        >
                            <NavSearch
                                className={focused ? 'focused' : ''}
                                onFocus={() => handleInputFocus(list)}
                                onBlur={handleInputBlur}
                            />
                        </CSSTransition>
                        <i className={focused ? 'focused iconfont zoom' : 'iconfont zoom'}>&#xe644;</i>
                        {this.getListArea()}
                    </SearchWrapper>
                </Nav>
                <Addition>
                    <Link to='/write'>
                    <Button className={'writting'}>
                        <i className="iconfont">&#xe6be;</i>
                        写文章</Button>
                        </Link>
                    <Button className={'reg'}>注册</Button>
                </Addition>
            </HeaderWrapper>
        )
    }
}



const mapStateToProps = (state) => {
    return {
        // focused: state.get('header').get('focused')
        focused: state.getIn(['header', 'focused']),
        mouseIn: state.getIn(['header', 'mouseIn']),
        list: state.getIn(['header', 'list']),
        page: state.getIn(['header', 'page']),
        totalPage: state.getIn(['header', 'totalPage']),
        login: state.getIn(['login','login'])
    }
};

const mapDispatchToProps = (dispatch) => {
    return {
        handleInputFocus(list) {
            if(list.size === 0){
                dispatch(actionCreators.getList());
            }
            dispatch(actionCreators.searchFocus());
        },
        handleInputBlur() {
            dispatch(actionCreators.searchBlur());
        },
        handleMouseEnter() {
            dispatch(actionCreators.mouseEnter());
        },
        handleMouseLeave() {
            dispatch(actionCreators.mouseLeave());
        },
        handleChange(page, totalPage, spin) {
            let originAngle = spin.current.style.transform.replace(/[^0-9]/ig, '');
            if (originAngle) {
                originAngle = parseInt(originAngle, 10);
            } else {
                originAngle = 0;
            }
            spin.current.style.transform = 'rotate(' + (originAngle + 180) + 'deg)';
            if (page < totalPage) {
                dispatch(actionCreators.changePage(page + 1))
            } else {
                dispatch(actionCreators.changePage(1))
            }
        },
        logout(){

            dispatch(loginActionCreators.logout());
        }
    }
};

export default connect(mapStateToProps, mapDispatchToProps)(Header);